<template>
	<view>
		<view class="ul">
			<view class="li" v-for="(item,index) in list" :key="index" @click="clickList(index)">
				<!-- 头像 -->
				<image v-if="avatarShow" :src="item.userInfo.avatar" class="avatar" mode=""
					@click.stop="clickAvatar(item)">
				</image>
				<view class="content">
					<!-- 用户信息 -->
					<view class="userinfo">
						<text class="username" @click.stop="clickUsername(item)">{{item.userInfo.username}}</text>
						<text class="date">31分钟前</text>
						<img class="more-icon" src="./static/more.png" alt="">
					</view>
					<!-- 定位 -->
					<address v-if="addressShow" :location="item.location"></address>
					<!-- 帖子内容 -->
					<view class="value">
						{{item.content || item.value}}
					</view>
					<!-- 图片组 -->
					<imageList :data="item.images" @click="clickImages(index,$event)"></imageList>

					<!-- 话题 -->
					<topic :data="item.topic"></topic>

					<view class="option">
						<img @click="clickForver(item,$event)" class="favor-icon" src="./static/favor_normal.png"
							alt="">
						<text @click="clickForver(item,$event)" class="option-text">0</text>
						<img class="comment-icon" src="./static/comment_normal.png" alt="">
						<text class="option-text">0</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"

	import topic from './components/topic/topic.vue'
	import address from './components/address/address.vue'
	import imageList from './components/imageList/imageList.vue'

	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPageScroll,
		onReady
	} from "@dcloudio/uni-app"

	const Emit = defineEmits(["click", "onReachBottom", "Forver", "clickUser"])

	defineProps({
		avatarShow: { // 是否显示头像
			type: Boolean,
			default: true
		},
		addressShow: { // 显示地区
			type: Boolean,
			default: true
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	function clickList(index) {
		Emit("click", index)
	}

	function clickAvatar(item) {
		Emit("clickUser", item)
	}
	function clickUsername(item) {
		Emit("clickUser", item)
	}
	function clickImages(index, imageIndex) {
		console.log('点击了图片数据', index, imageIndex);
	}
	function clickMore(index) {
		console.log('点击了更多', index);
	}
	function clickForver(item) {
		Emit("Forver", item)
	}
	onReachBottom(() => {
		Emit("onReachBottom")
	})
</script>

<style scoped lang="scss">
	// 用户名字体颜色
	$usernameColor: #1665dd;
	// 话题高度
	$topicHeight: 35rpx;

	.ul {
		display: flex;
		flex-direction: column;
		/* margin-top: 20rpx; */
	}

	.li {
		padding: 20rpx 20rpx;
		padding-top: 40rpx;
		overflow: hidden;
		border-bottom: 15rpx solid #efe6e696;
		display: flex;
	}

	.li:active {
		// background-color: #d5dbdb;
	}

	.favor-icon,
	.comment-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}

	.more-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: black;
		margin-right: 28rpx;
		overflow: hidden;
		margin-top: 6rpx;
		position: relative;
	}

	.content {
		flex: 1;
	}

	.userinfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.username {
		margin-right: 17rpx;
		color: $usernameColor;
	}

	.username,
	.value {
		font-size: 32rpx;
	}

	.address,
	.date {
		font-size: 28rpx;
	}

	.date {
		flex: 1;
	}

	.date,
	.address,
	.option-icon,
	.option-text {
		color: slategray;
	}

	.value {
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.address {

		margin-top: 4rpx;
	}

	.address-icon {
		font-size: 26rpx;
		margin-right: 8rpx;
	}

	.more-icon {
		font-size: 45rpx;
	}

	.option {
		display: flex;
		align-items: center;
		margin: 15rpx 0rpx;
		font-size: 28rpx;
	}

	.option-icon {
		font-size: 34rpx;
		vertical-align: middle;
		margin-right: 8rpx;
	}

	.option-text {
		// font-size: 28rpx;
		margin-right: 35rpx;
	}

	.option-icon-reward {
		// font-size: 28rpx;
		margin-top: 2rpx;
	}

	.option-icon-agree {
		// font-size: 28rpx;
	}

	.option-comment-button .option-text {
		margin-right: 0rpx;
	}

	.option-comment-button .option-icon {
		font-size: 34rpx;
		margin-right: 8rpx;
		vertical-align: middle;
		margin-top: 3rpx;
	}

	.option-comment-button {
		margin-left: auto;
		width: 140rpx;
		height: 55rpx;
		border-radius: 35rpx;
		border: 1px solid #9b9494;
		line-height: 55rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>